<!-- subpkg_consult/department/index.vue -->
<script setup>
	import { computed, ref } from 'vue'
	import { departmentListApi } from '@/services/consult'
	// 科室列表
	const departmentList = ref([])
	// 科室列表
	async function getDepartmentList() {
		// 科室列表接口
		const { code, data, message } = await departmentListApi()
		// 检测接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)
		// 渲染列表数据
		departmentList.value = data
	}

	// 一级科室的索引值
	const tabIndex = ref(0)
	// 切换选择二级科室
	function onTopDeparmentClick(index) {
		tabIndex.value = index
	}

	// 获取科室列表
	getDepartmentList()

	// 二级科室的信息
	const secondDepartList = computed(() => {
		return departmentList.value[tabIndex.value].child
	})

	const props = defineProps({
		type: String,
		illnessType: String,
	})
</script>

<template>
	<view class="department-page">
		<scroll-view scroll-y class="department-primary">
			<view
				class="department-item"
				v-for="(department, index) in departmentList"
				:key="department.id"
				:class="{ active: tabIndex === index }"
				@click="onTopDeparmentClick(index)"
				>{{ department.name }}</view
			>

			<view class="department-item"></view>
		</scroll-view>

		<scroll-view class="department-secondary">
			<navigator
				v-for="(secondDepart, index) in secondDepartList"
				:key="secondDepart.id"
				hover-class="none"
				:url="`/subpkg_consult/description/index?type=${props.type}&illnessType=${props.illnessType}&depId=${secondDepart.id}`"
				class="department-item"
			>
				{{ secondDepart.name }}
			</navigator>
		</scroll-view>
	</view>
</template>

<style lang="scss">
	@import './index.scss';
</style>
